<script setup>
import img1 from '@/assets/117.jpg'
import img2 from '@/assets/118.jpg'
import img3 from '@/assets/119.jpg'
import img4 from '@/assets/120.jpg'
import img5 from '@/assets/121.jpg'
import {ref} from 'vue'
const images=ref([
  {img:img1},
  {img:img2},
  {img:img3},
  {img:img4},
  {img:img5}
])


</script>

<!--这是轮播图-->
<template>
  <div>
    <h1>精选特价好物</h1>
  <div class="elSlideShow">
    <el-carousel :interval="4000" type="card" height="430px" >
      <el-carousel-item v-for="item in images" :key="item.img">
       <img :src="item.img" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
  </div>
</template>

<style scoped>
.elSlideShow{
  width: 85%;
  margin-left: 7.5%;
  margin-top: 10px;
}
img{
  width: 40rem;
  height: 27rem;
}
h1 {
  text-align: center;
  font-family: Montserrat, sans-serif;
  color: #333;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 50px;
  text-align: center;
}

</style>
